﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>这是一个网页</title>

    <!--内部样式表，head和body都可-->
    <style>
        /*改变所有h2标签样式*/
        h2 {
            color: blueviolet;
            font-size: 16px;
        }

        .盒子模型1 {
            /*边框border，内边距padding，外边距margin*/
            background-color: lightpink;
            display: inline-block;
            width: 300px;
            height: 200px;
            border: solid 5px lightgreen; /*边框复合属性*/
            border-bottom: dashed 10px lightgreen; /*单边复合属性*/
            padding: 50px;
            margin: 50px;
        }

        .盒子模型2 {
            background-color: hotpink;
            display: inline-block;
            width: 300px;
            height: 200px;
            border-style: double; /*同下*/
            border-width: 10px 0; /*可以上右下左顺时针方向给四边分别设置宽度，若缺省则与对向相同，只有一个值则四边相同*/
            border-color: lawngreen; /*同上*/
        }
    </style>
    <!--外部样式表-->
    <link rel="stylesheet" href="style.css" />
    <!--内联导入js，head和body都可-->
    <script>
        console.log("这是一个内联导入的js");
    </script>
    <!--外联导入js-->
    <script src="script.js" charset="gb2312"></script><!--不知道为什么utf-8没有用，此外big5代表繁体中文-->
    <!--移动端适配有两种主流实现方法，1.通过rem、vw/vh等单位，实现在不同设备上显示相同比例；2.响应式布局，通过媒体查询@media实现一套HTML配合多套CSS-->
    <!--viewport表示视区，device-width表示设备宽度，scale表示缩放比例，user-scalable表示用户是否可缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,
          minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <!--px：绝对长度单位；rem：相对长度单位，是基于HTML标签中的font-size属性值的倍数
    只要在不同设备设置合适rem初始值，当设备发生变化时font-size就会根据html根节点自动等比适配大小，从而在不同设备上表现统一-->
    <style>
        /*html{
            font-size:20px;
        }*/
        .box-px {
            width: 500px;
            height: 200px;
            background-color: blueviolet;
            margin-bottom: 50px;
        }

        .box-rem {
            width: 5rem;
            height: 3rem;
            background-color: cornflowerblue;
        }
    </style>
    <!--Flex弹性盒子布局：使用Flex布局的容器（称Flex容器）的子元素（称Flex项目）能以弹性的形式排列，可配合rem处理尺寸来适应不同屏幕尺寸和设备
        容器存在两条轴，水平的主轴（main）和竖直的交叉轴（cross），轴开始处为start，结束处为end，单个项目占据空间为size-->
    <!--Flex容器可设置六个属性-->
    <!--1.flex-direction：决定主轴方向，即项目排列方向，属性值：
                row（默认值）：主轴水平，起点在左
                row-reverse：主轴水平，起点在右
                column：主轴竖直，起点在上
                column-reverse：主轴竖直，起点在上
            2.flex-wrap：一行轴线排不下的换行方式，属性值：
                nowrap（默认）：不换行/列（若宽度不够会压缩盒子宽度）
                wrap：主轴为横向时，从上到下换行；主轴为纵向时，从左到右换列；
                wrap-reverse：主轴为横向时，从下到上换行；主轴为纵向时，从右到左换列；
            3.flex-flow：flex-direction和flex-wrap的复合属性
            4.justify-content：项目在主轴上的对齐方式，属性值：
                flex-start（默认值）：与主轴起点对齐
                flex-end：与主轴终点对齐
                center：与主轴中点对齐
                space-between：两端与主轴起点和终点对齐，项目间间隔相等
                space-around：项目两侧间隔相等，项目间间隔比项目与边框间隔大一倍（即与两端有间隔）
                space-evenly：项目之间和项目与边框间隔都相等
            5.align-items：项目在交叉轴上的对齐方式，属性值：
                flex-start（默认值）：与交叉轴起点对齐
                flex-end：与交叉轴终点对齐
                center：与交叉轴中点对齐
                baseline：项目的首行文字的基线对齐
                stretch（默认值）：若项目未设置高度或设置为auto，项目将占满容器整个高度
            6.align-content：多根轴线（即有换行/列）的对齐方式，若项目只有一根轴线则无效，属性值：
                flex-start（默认值）：与交叉轴起点对齐
                flex-end：与交叉轴终点对齐
                center：与交叉轴中点对齐
                space-between：两端与交叉轴起点和终点对齐，项目间间隔相等
                space-around：轴线两侧间隔相等，轴线间间隔比轴线与边框间隔大一倍（即与两端有间隔）
                stretch（默认值）：主轴线占满整个交叉轴
            -->
    <style>
        .container {
            display: flex;
            background-color: lightblue;
            height: 10rem;
            flex-direction: column-reverse;
            flex-wrap: wrap-reverse;
            justify-content: space-around;
            align-items:center;
            align-content:end;
        }
        .item{
            width:5rem;
            font-size:2rem;
        }
    </style>
</head>
<body>
    <!--常用文本标签-->
    <h1 style="color:aqua">这是一级标题，应用内联样式</h1><!--内联样式表-->
    <h2>这是二级标题，应用内部样式</h2>
    <h3>这是三级标题，应用外部样式</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
    <p id="css_id">这是一个段落，<b>加粗</b><!--或者<strong></strong>-->、<i>斜体</i><!--或者<em></em>-->、<u>下划线</u>、<s>删除线</s></p>
    <ul>
        <li>无序列表元素1</li>
        <li>无序列表元素2</li>
        <li>无序列表元素3</li>
    </ul>
    <ol>
        <li>有序列表元素1</li>
        <li>有序列表元素2</li>
        <li>有序列表元素3</li>
    </ol>
    <table border="1">
        <!--border是添加表格边框，数字表示宽度，可不要边框省略border-->
        <tr>
            <!--table row-->
            <th>列标题1</th><!--table head-->
            <th>列标题2</th>
            <th>列标题3</th>
        </tr>
        <tr>
            <td>列1元素1</td><!--table data-->
            <td>列2元素1</td>
            <td>列3元素1</td>
        </tr>
        <tr>
            <td>列1元素2</td>
            <td>列2元素2</td>
            <td>列3元素2</td>
        </tr>
    </table>

    <br /><!--换行-->
    <hr /><!--分割线-->
    <!--元素属性，基本语法为<开始标签 属性名="属性值">，每个元素可以有多个属性，属性名不区分大小写，属性值区分-->
    <a href="https://baidu.com">这是一个默认该窗口打开的超链接</a>
    <!--href和target是a标签独有的属性，前者为URL，后者为打开方式，默认_self在当前窗口打开，_blank新建空白页，_parent父窗口，_top顶层窗口-->
    <a href="https://baidu.com" target="_blank">这是一个新窗口打开的超链接</a>
    <img src="C:\Users\Administrator\Pictures\Saved Pictures\应星刃.jpg" alt="" style="width:500px" />
    <img src="应星刃.jpg" alt="这是一个无法显示的图片" />
    <br />
    <img src="C:\Users\Administrator\Pictures\Saved Pictures\饮月月.jpg" alt="" width="100" height="100" />
    <!--src是图片路径，可以为绝对/相对路径或URL；alt是图片无法显示的替代文本，width是宽度，height是高度-->
    <hr />

    <!--块元素block（用于组织和布局页面的主要结构和内容，通常占据新行一整行宽度，呈现独立内容块，即使设置宽高仍然独占一行，只会改变样式，可嵌套块级元素和行内元素，常见有div、p、h1、ul、ol、li、table、form等）
        行内元素inline（用于添加文本样式或为文本中的一部分应用样式，通常在同一行呈现，只占据所需宽度，不会独占一行，无法设置宽高，只能嵌套行内元素，常见有span、a、strong、em、img、br、input等）
        行内块元素inline-block（水平排列，但可设置宽、高、内外边距等块元素属性，可嵌套块级元素和行内元素，常见有img）
        三种类型可通过display属性相互转换，语法为style="display:block"，该属性也可用于其他表示如none为不显示-->
    <!--块级标签div，用于创建一个可以包含其他HTML元素的容器块-->
    <div class="nav">
        <!--导航-->
        <a href="#">链接1</a><!--#占位，不会跳转-->
        <a href="#">链接2</a>
        <a href="#">链接3</a>
    </div>
    <div class="content">
        <!--内容-->
        <h1>文章标题</h1>
        <p id="css_son">son文章内容</p>
        <p style="line-height:100px">son文章内容长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</p>
        <p>son文章内容长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</p>
        <div>
            <p class="css_grandson">grandson文章内容</p>
        </div>
    </div>

    <!--行内元素span，用于包裹部分文本以便于使用样式、CSS或JS行为-->
    <span>这是一个span标签</span>
    <span>这也是一个span标签</span>
    <br />
    <span>链接点击这里<a href="https://baidu.com">https://baidu.com</a></span>

    <hr />
    <!--表单-->
    <form action="#">
        <!--action后接URL，即后端提供的API，用于存放提交的表单-->
        <!--表单容器-->
        <span>用户名：</span>
        <input type="text" value="默认输入" /><!--单标签，行内元素，type表示输入类型，text为文本-->
        <label for="password">密码：</label><!--input专用，for后接id将标签和输出关联-->
        <input type="password" id="password" placeholder="输入提示" /><!--password为暗文输出，文本框最后自带显示明文小眼睛-->
        <br /><br />
        <label>性别：</label>
        <input type="radio" name="gender" />男<!--radio为单选圆框，若想实现单选效果需有相同name-->
        <input type="radio" name="gender" />女
        <input type="radio" />沃尔玛购物袋
        <input type="radio" />武装直升机
        <br /><br />
        <label>爱好：</label>
        <input type="checkbox" name="hobby" />唱<!--checkbox为多选方框-->
        <input type="checkbox" name="hobby" />跳
        <input type="checkbox" name="hobby" />rap
        <input type="checkbox" name="hobby" />篮球
        <br /><br />
        <input type="submit" /><!--表单的提交按钮，默认为提交，也可用value重命名-->
    </form>

    <br /><hr /><br />
    <div class="盒子模型1">盒子模型1</div>
    <div class="盒子模型2">盒子模型2</div>

    <br /><hr /><br />
    <div class="father">
        <div class="left-son">left-son</div>
        <div class="left-son">left-son</div>
        <div class="right-son">right-son</div>
        <div class="right-son">right-son</div>
    </div>
    <div class="father">
        <div class="normal-pos">normal-pos</div>
        <div class="relative-pos">relative-pos</div>
        <div class="absolute-pos">absolute-pos</div>
        <div class="fixed-pos">fixed-pos</div>
    </div>

    <br /><hr /><br />
    <div id="doc1">这是一个id选择器标签</div>
    <div class="doc2">这是一个类选择器标签</div>
    <div>这是一个普通div标签</div>
    <br />
    <button onclick="click_event()">这是一个HTML属性绑定点击事件按钮</button>
    <input type="text" onfocus="focus_event()" onblur="blur_event()" placeholder="这是一个HTML属性绑定焦点事件输入框" />
    <button id="button1">这是一个DOM属性绑定点击事件按钮</button>
    <button id="button2">这是一个addEventListener方法绑定点击事件按钮</button>
    <script>
        var elem_id = document.getElementById("doc1");
        console.log(elem_id);
        var elem_class = document.getElementsByClassName("doc2")[0];
        console.log(elem_class);
        var elem_tag = document.getElementsByTagName("div");
        console.log(elem_tag);
        //注意：此后.xxx都为属性而非函数，用“=”而非“()”
        //innerHTML自带HLML标记解析（注意内部引号转义以免提前结束报错），innerText只会识别为纯文本
        elem_id.innerHTML = "<a href=\"https://baidu.com\" target=\"_blank\">修改id选择器标签为超链接</a>";
        elem_class.innerText = "修改类选择器标签文本内容";
        elem_class.style.color = "red";
        elem_class.style.fontSize = "20px";
        //2.DOM属性绑定事件
        var elem_button1 = document.getElementById("button1");
        console.log(elem_button1);
        elem_button1.onclick = function () {//一次性匿名函数，也可替换为已有的函数名
            alert("这是一个DOM属性绑定点击事件触发");
        }
        //3.addEventListener方法绑定事件
        var elem_button2 = document.getElementById("button2");
        console.log(elem_button2);
        elem_button2.addEventListener("click", function () {
            alert("这是一个addEventListener方法绑定点击事件触发");
        })
    </script>

    <br /><hr /><br />
    <div class="box-px">这是一个px单位标签</div>
    <div class="box-rem">这是一个rem单位标签</div>
    <script>
        //设置HTML根节点值为设备宽度的1/10
        function resetHtmlFontSize() {
            document.documentElement.style.fontSize = screen.width / 50 + "px";
        }
        //绑定改变设备尺寸事件，这样就不用手动刷新（但由于我用的浏览器没法实时更新，所以演示效果还是得刷新）
        window.onresize = resetHtmlFontSize();
    </script>

    <br /><hr /><br />
    <div class="container">
        <div class="item" style="background-color:crimson">1</div>
        <div class="item" style="background-color:orange">2</div>
        <div class="item" style="background-color:yellow">3</div>
        <div class="item" style="background-color:lawngreen">4</div>
        <div class="item" style="background-color:dodgerblue">5</div>
        <div class="item" style="background-color:blueviolet">6</div>
    </div>
</body>
</html>